<template>
  <div style="background-color: #f5f5f5;">
    <div class="myCenter">
      <el-tabs :tab-position="tabPosition" type="card" style="height: 100%;">
        <el-tab-pane label="個人主頁">
          <div class="tabItem">
            <div class="userInfo">
              <div class="userImg">
                <img src="../../../static/myCenter/cimg01.jpg" alt="">
              </div>
              <div class="txtInfo">
                <p>用戶瞪稱用戶暄稱</p><br/>
                <p>售盤方案</p>
                <p style="font-size: 12px;padding-bottom: 30px">購買方案，即可刊登廣告!購買售盤方案</p>
              </div>
              <div class="txtInfo">
                <p>租盤方案</p>
                <p style="font-size: 12px;padding-bottom: 30px;">購買方案，即可刊登廣告!購買租盤方案</p>

              </div>
            </div>
            <div style="margin-top: 15px;">
              <img src="../../../static/myCenter/cimg02.jpg" width="100%" alt="">
            </div>
            <div class="building">
              <div style="float: right;padding: 0 15px 0 0;">
                <el-button>租盤</el-button>
                <el-button style="background-color:#f5f5f5;">售盤</el-button>
              </div>
              <el-tabs v-model="activeName" type="card" style="width:100%;">
                <el-tab-pane label="刊登中的樓盤" name="first">
                  <div class="tableInfo">
                    <div class="tableInfoImg">
                      <div style="text-align: left;width: 500px;">
                        <img src="../../../static/myCenter/cimg03.jpg" width="200px"
                             style="float: left;margin-right: 15px;" alt="">
                        <p><span style="font-weight: bold;margin-right: 15px">堅都大廈1</span>
                          <span>[屋苑]</span>
                          <span style="padding: 5px;background-color:#999999;margin-left: 15px;color: #fff">末開啟</span>
                        </p><br/><br/><br/>
                        <p>5435134</p><br/>
                        <p><span style="margin-right: 15px;">12房3聽</span>
                          <span>1222吹(實)</span>
                          <span style="margin-left: 15px">13333吠(建)</span></p><br/>
                        <p style="color: #999999">物件編號: R835369</p>
                      </div>
                      <div style="width: 200px;height: 200px;text-align: right">
                        <p><span style="font-size: 18px;color: #ff5500;">1,112,222</span>元/月</p><br>
                        <p style="color: #999999">2019-08-11錄入</p><br>
                        <p style="color: #999999">0人瀏覽</p><br>
                        <p><i class="el-icon-connection"></i>分享&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-edit"></i>修改
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <i class="el-icon-document-copy"></i>複裂&nbsp;&nbsp;</p>
                      </div>
                    </div>
                    <div
                      style="display: flex;justify-content: space-around;flex-direction: column;flex-flow: column;margin: 0 auto">
                      <p>
                        <el-button style="background-color: #ad2022;color: #ffffff">開放</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue; border:1px solid blue">刪除</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue;border:1px solid blue">已付款</el-button>
                      </p>

                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="關閉中的樓盤" name="second">
                  <div class="tableInfo">
                    <div class="tableInfoImg">
                      <div style="text-align: left;width: 500px;">
                        <img src="../../../static/myCenter/cimg03.jpg" width="200px"
                             style="float: left;margin-right: 15px;" alt="">
                        <p><span style="font-weight: bold;margin-right: 15px">堅都大廈</span>
                          <span>[屋苑]</span>
                          <span style="padding: 5px;background-color:#999999;margin-left: 15px;color: #fff">末開啟</span>
                        </p><br/><br/><br/>
                        <p>5435134</p><br/>
                        <p><span style="margin-right: 15px;">12房3聽</span>
                          <span>1222吹(實)</span>
                          <span style="margin-left: 15px">13333吠(建)</span></p><br/>
                        <p style="color: #999999">物件編號: R835369</p>
                      </div>
                      <div style="width: 200px;height: 200px;text-align: right">
                        <p><span style="font-size: 18px;color: #ff5500;">1,112,222</span>元/月</p><br>
                        <p style="color: #999999">2019-08-11錄入</p><br>
                        <p style="color: #999999">0人瀏覽</p><br>
                        <p><i class="el-icon-connection"></i>分享&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-edit"></i>修改
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <i class="el-icon-document-copy"></i>複裂&nbsp;&nbsp;</p>
                      </div>
                    </div>
                    <div
                      style="display: flex;justify-content: space-around;flex-direction: column;flex-flow: column;margin: 0 auto">
                      <p>
                        <el-button style="background-color: #ad2022;color: #ffffff">開放</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue; border:1px solid blue">刪除</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue;border:1px solid blue">已付款</el-button>
                      </p>

                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-tab-pane>

<!--        <el-tab-pane label="房屋出租" name="first">-->
<!--          <div class="tabItem">-->
<!--            <div class="Advertisement">-->
<!--              <div style="padding:30px 0 0 15px;">-->
<!--                <p><span style="font-weight: bold;color: #333333;font-size: 20px;">刊登租房广告</span>-->
<!--                  <span>(<span style="color: red">*</span>为必填项)</span>-->
<!--                </p>-->
<!--              </div>-->
<!--              &lt;!&ndash;              步骤条&ndash;&gt;-->
<!--              <div class="steps">-->
<!--                <el-steps :active="1" align-center finish-status="success" process-status="finish">-->
<!--                  <el-step title="填写资料" description=""></el-step>-->
<!--                  <el-step title="确认刊登方案" description=""></el-step>-->
<!--                  <el-step title="缴费" description=""></el-step>-->
<!--                  <el-step title="完成刊登" description=""></el-step>-->
<!--                </el-steps>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 物业用途  物业描述   联络资料&ndash;&gt;-->
<!--            <div class="propertyUse">-->
<!--              <div>物业用途</div>-->
<!--              <div>物业描述</div>-->
<!--              <div>联络资料</div>-->
<!--            </div>-->
<!--            &lt;!&ndash;        物业用途&ndash;&gt;-->
<!--            <div class="propertyUseItem">-->
<!--              <span>物业用途</span>-->
<!--            </div>-->
<!--            <div style="margin-top: 30px">-->
<!--              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                <el-form-item label="物业用途" prop="name">-->
<!--                  <el-radio-group v-model="ruleForm.resource" style="margin-top: 15px">-->
<!--                    <el-radio label="住宅"></el-radio>-->
<!--                    <el-radio label="工厂大夏"></el-radio>-->
<!--                    <el-radio label="商铺"></el-radio>-->
<!--                    <el-radio label="单位"></el-radio>-->
<!--                    <el-radio label="土地"></el-radio>-->
<!--                    <el-radio label="海外物业"></el-radio>-->
<!--                    <br/>-->
<!--                    <el-radio label="屋菀" style="padding-top: 15px"></el-radio>-->
<!--                    <el-radio label="单栋式大夏"></el-radio>-->
<!--                    <el-radio label="村屋"></el-radio>-->
<!--                    <el-radio label="唐楼"></el-radio>-->
<!--                    <el-radio label="居屋/工屋"></el-radio>-->
<!--                    <el-radio label="洋房/独立屋"></el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="物业编号">-->
<!--                  <el-input v-model="form.name" style="width: 500px" placeholder="填写物业编号"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋苑/楼盘">-->
<!--                  &lt;!&ndash;                  <el-input v-model="form.name" style="width: 500px" placeholder="请填写屋菀关键词"></el-input>&ndash;&gt;-->
<!--                  <el-select style="width: 500px" v-model="form.region" placeholder="请填写屋菀关键词">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                  <span style="color: red;cursor: pointer">直接填写地址</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀/楼盘">-->
<!--                  <div style="width: 500px;height: 300px;border: 1px solid #cccccc;">地图</div>-->
<!--                  <div>-->
<!--                    <span style="color: red;">修改地址</span>-->
<!--                    <span style="color: #999999;font-size: 12px;">tip如调整座数和地图定位位置，请点击地图对应位置</span>-->
<!--                    <span><input placeholder="请填写地址或大夏名" style="width: 150px;height: 20px"></input>-->
<!--                      <el-button-->
<!--                        style="color: #ffffff;background-color:#ad2022;height: 30px;line-height: 0">搜寻</el-button>-->
<!--                    </span>-->
<!--                    <span style="font-size: 12px;color: #999999;">位置已更新，</span>-->
<!--                    <span style="color: red;">还原最初位置</span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="楼龄/年">-->
<!--                  <el-input v-model="form.name" style="width: 500px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="单位资料" prop="name">-->
<!--                  <div class="unitData">-->
<!--                    <div class="inpItemOne">-->
<!--                      <input type="text">房-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo">-->
<!--                      <input type="text">厅-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemThree">-->
<!--                      <el-checkbox v-model="checked">开放式</el-checkbox>-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo inpItemFour">-->
<!--                      使用<input type="text">平方积-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo inpItemFour">-->
<!--                      建筑<input type="text">平方积-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="width: 85%;">-->
<!--                    <span style="font-weight: bold;font-size: 10px">请填写数字，不能为0</span>-->
<!--                    <span style="float: right;"><el-checkbox v-model="checked">-->
<!--                      <span style="font-weight: bold;font-size: 10px;">面积未核算</span></el-checkbox></span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀/楼盘">-->
<!--                  <el-input v-model="form.name" style="width: 500px" placeholder="请输入5字的自定标签"></el-input>-->
<!--                  <div class="Label">-->
<!--                    <span style="color: #999999">热门标签</span>-->
<!--                    <span class="Labelitem" style="background-color:#f2eade;color: #d6b988;">豪华装修</span>-->
<!--                    <span class="Labelitem" style="background-color:#fbebec; color: #c07f85;">设备齐全</span>-->
<!--                    <span class="Labelitem" style="color: #a2bbd4;">钥匙</span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="出售楼层">-->
<!--                  <el-select v-model="form.region" placeholder="请输入楼层">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="出售楼层">-->
<!--                  <el-select v-model="form.region" placeholder="南">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                  <el-select v-model="form.region" placeholder="一般装修">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="景观">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="海景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="山景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="远景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="开场" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="城市景" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="提供设施">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="电视" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="冷气" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="洗衣液" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="雪散 name=" type-->
<!--                    "></el-checkbox>-->
<!--                    <el-checkbox label="床" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="餐桌" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="书画" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀设施">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="便利店" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="便利店" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="超级市场" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="游泳池 name=" type-->
<!--                    "></el-checkbox>-->
<!--                    <el-checkbox label="儿童乐园" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </div>-->
<!--            &lt;!&ndash;            租賃信息&ndash;&gt;-->
<!--            <div class="leasingInformation">-->
<!--              <div class="propertyUseItem">-->
<!--                <span>租賃信息</span>-->
<!--              </div>-->
<!--              <div class="inputItem">-->
<!--                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                  <el-form-item label="租金" prop="name">-->
<!--                    <div class="inpItemOne ">-->
<!--                      <div>-->
<!--                        <input type="text" style="width: 100px;height: 30px"><span>元/月</span>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="按金">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="两个月租金">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="生约">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="12个月">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="死约">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="12个月">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="租金包含">-->
<!--                    <el-checkbox-group v-model="form.type">-->
<!--                      <el-checkbox label="差向" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="地租/地税" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="管理费" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="水费" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="电费" name="type"></el-checkbox>-->
<!--                    </el-checkbox-group>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="管理费">-->
<!--                    <el-input v-model="form.name" style="width: 200px"></el-input>-->
<!--                    <span>元/月</span>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="可起租日">-->
<!--                    <el-date-picker type="date" placeholder="选择日期" style="width: 200px;"></el-date-picker>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="出售楼层">-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="可明火煮食" value="shanghai"></el-option>-->
<!--                      <el-option label="可明火煮食" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="可饲养宠物" value="shanghai"></el-option>-->
<!--                      <el-option label="可饲养宠物" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="租客不限性别" value="shanghai"></el-option>-->
<!--                      <el-option label="租客不限性别" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="不可分租" value="shanghai"></el-option>-->
<!--                      <el-option label="不可分租" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="广告标题" prop="name">-->
<!--                    <el-input v-model="form.name" style="width: 500px" placeholder="如:周怀大夏设施完善"></el-input>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="特色描述">-->
<!--                    <div style="width: 95%;height: 350px;">-->
<!--                      &lt;!&ndash; 富文本编辑框 &ndash;&gt;-->
<!--                      <div id="websiteEditorElem" style="height:300px;background: #ffffff;"></div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="上传放盘图片" label-width="200" prop="name">-->
<!--                    <p style="color: #999999;">一张好的图片 能影响您的成效,如现在没有照片，可之后在会员中心修改放盘内加回</p>-->
<!--                    <div class="uploadImg">-->
<!--                      <div>-->
<!--                        &lt;!&ndash;                      <el-button class="btn">选择档案</el-button>&ndash;&gt;-->
<!--                        <el-upload-->
<!--                          class="upload-demo"-->
<!--                          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                          :on-preview="handlePreview"-->
<!--                          :on-remove="handleRemove"-->
<!--                          :before-remove="beforeRemove"-->
<!--                          multiple-->
<!--                          :limit="3"-->
<!--                          :on-exceed="handleExceed"-->
<!--                          :file-list="fileList">-->
<!--                          <el-button class="btn">选择档案</el-button>-->
<!--                          <p>未选择任何档案</p>-->
<!--                        </el-upload>-->


<!--                      </div>-->
<!--                      <div class="uploadImgItemTwo">-->
<!--                        &lt;!&ndash;                      <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">&ndash;&gt;-->
<!--                        <el-upload-->
<!--                          class="avatar-uploader"-->
<!--                          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                          :show-file-list="false"-->
<!--                          :on-success="handleAvatarSuccess"-->
<!--                          :before-upload="beforeAvatarUpload">-->
<!--                          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--                          <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">-->
<!--                        </el-upload>-->
<!--                        <span style="display: inline-block;color: #a9a9a9;">图片描述</span>-->
<!--                      </div>-->
<!--                      <div class="uploadImgItemThree">-->
<!--                        <el-button class="btn" style="width: 150px">移除</el-button>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;            联络资料&ndash;&gt;-->
<!--            <div class="ContactInformation">-->
<!--              <div class="propertyUseItem" style="margin-left: 15px">-->
<!--                <span>联络资料</span>-->
<!--              </div>-->
<!--              <div style="margin-top: 30px">-->
<!--                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                  <el-form-item label="身份" prop="name">-->
<!--                    <el-radio-group v-model="ruleForm.resource">-->
<!--                      <el-radio label="业主"></el-radio>-->
<!--                      <el-radio label="香港代理人"></el-radio>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="联络人" prop="name">-->
<!--                    <p style="color: #999999;">请输入联络人</p>-->
<!--                    <div class="userInfos">-->
<!--                      <div class="Infobox">-->
<!--                        <div><img src="../../../static/myCenter/cimg07.jpg" width="100" alt=""></div>-->
<!--                        <div style="margin-left: 15px;">-->
<!--                          <p>姓名:李小小</p>-->
<!--                          <p>电话: 41566441125</p>-->
<!--                          <p>手机: 13707879376</p>-->

<!--                          <el-button style="background-color:#f08181;color: #ffffff;"  @click="dialogVisible = true">编辑</el-button>-->
<!--                          <el-button style="background-color:#cccccc;">删除</el-button>-->
<!--                        </div>-->

<!--                      </div>-->
<!--                      <div class="Infobox">-->
<!--                        <div @click="dialogVisible = true"><img src="../../../static/myCenter/cimg08.jpg" width="150" alt=""></div>-->
<!--                        <div style="margin-left: 15px;text-align: center;line-height: 150px;">-->
<!--                          <p>新建联系人</p>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="bottomFooter">-->
<!--              <el-button class="footerBtn">下一步</el-button>-->
<!--              <span style="color: #999999;font-weight: bold;">-->
<!--                无法正常刊登?请联系客服电话: 2197 4910或<span style="color: red">[线上留言]</span>-->
<!--              </span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
<!--        <el-tab-pane label="房屋买卖">-->
<!--          <div class="tabItem">-->
<!--            <div class="Advertisement">-->
<!--              <div style="padding:30px 0 0 15px;">-->
<!--                <p><span style="font-weight: bold;color: #333333;font-size: 20px;">刊登租房广告2</span>-->
<!--                  <span>(<span style="color: red">*</span>为必填项)</span>-->
<!--                </p>-->
<!--              </div>-->
<!--              &lt;!&ndash;              步骤条&ndash;&gt;-->
<!--              <div class="steps">-->
<!--                <el-steps :active="1" align-center finish-status="success" process-status="finish">-->
<!--                  <el-step title="填写资料" description=""></el-step>-->
<!--                  <el-step title="确认刊登方案" description=""></el-step>-->
<!--                  <el-step title="缴费" description=""></el-step>-->
<!--                  <el-step title="完成刊登" description=""></el-step>-->
<!--                </el-steps>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; 物业用途  物业描述   联络资料&ndash;&gt;-->
<!--            <div class="propertyUse">-->
<!--              <div>物业用途</div>-->
<!--              <div>物业描述</div>-->
<!--              <div>联络资料</div>-->
<!--            </div>-->
<!--            &lt;!&ndash;        物业用途&ndash;&gt;-->
<!--            <div class="propertyUseItem">-->
<!--              <span>物业用途</span>-->
<!--            </div>-->
<!--            <div style="margin-top: 30px">-->
<!--              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                <el-form-item label="物业用途" prop="name">-->
<!--                  <el-radio-group v-model="ruleForm.resource" style="margin-top: 15px">-->
<!--                    <el-radio label="住宅"></el-radio>-->
<!--                    <el-radio label="工厂大夏"></el-radio>-->
<!--                    <el-radio label="商铺"></el-radio>-->
<!--                    <el-radio label="单位"></el-radio>-->
<!--                    <el-radio label="土地"></el-radio>-->
<!--                    <el-radio label="海外物业"></el-radio>-->
<!--                    <br/>-->
<!--                    <el-radio label="屋菀" style="padding-top: 15px"></el-radio>-->
<!--                    <el-radio label="单栋式大夏"></el-radio>-->
<!--                    <el-radio label="村屋"></el-radio>-->
<!--                    <el-radio label="唐楼"></el-radio>-->
<!--                    <el-radio label="居屋/工屋"></el-radio>-->
<!--                    <el-radio label="洋房/独立屋"></el-radio>-->
<!--                  </el-radio-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="物业编号">-->
<!--                  <el-input v-model="form.name" style="width: 500px" placeholder="填写物业编号"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋苑/楼盘">-->
<!--                  <el-select style="width: 500px" v-model="form.region" placeholder="请填写屋菀关键词">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                  <span style="color: red;cursor: pointer">直接填写地址</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀/楼盘">-->
<!--                  <div style="width: 500px;height: 300px;border: 1px solid #cccccc;">地图</div>-->
<!--                  <div>-->
<!--                    <span style="color: red;">修改地址</span>-->
<!--                    <span style="color: #999999;font-size: 12px;">tip如调整座数和地图定位位置，请点击地图对应位置</span>-->
<!--                    <span><input placeholder="请填写地址或大夏名" style="width: 150px;height: 20px"></input>-->
<!--                      <el-button-->
<!--                        style="color: #ffffff;background-color:#ad2022;height: 30px;line-height: 0">搜寻</el-button>-->
<!--                    </span>-->
<!--                    <span style="font-size: 12px;color: #999999;">位置已更新，</span>-->
<!--                    <span style="color: red;">还原最初位置</span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="楼龄/年">-->
<!--                  <el-input v-model="form.name" style="width: 500px"></el-input>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="单位资料" prop="name">-->
<!--                  <div class="unitData">-->
<!--                    <div class="inpItemOne">-->
<!--                      <input type="text">房-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo">-->
<!--                      <input type="text">厅-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemThree">-->
<!--                      <el-checkbox v-model="checked">开放式</el-checkbox>-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo inpItemFour">-->
<!--                      使用<input type="text">平方积-->
<!--                    </div>-->
<!--                    <div class="inpItemOne inpItemTwo inpItemFour">-->
<!--                      建筑<input type="text">平方积-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div style="width: 85%;">-->
<!--                    <span style="font-weight: bold;font-size: 10px">请填写数字，不能为0</span>-->
<!--                    <span style="float: right;"><el-checkbox v-model="checked">-->
<!--                      <span style="font-weight: bold;font-size: 10px;">面积未核算</span></el-checkbox></span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀/楼盘">-->
<!--                  <el-input v-model="form.name" style="width: 500px" placeholder="请输入5字的自定标签"></el-input>-->
<!--                  <div class="Label">-->
<!--                    <span style="color: #999999">热门标签</span>-->
<!--                    <span class="Labelitem" style="background-color:#f2eade;color: #d6b988;">豪华装修</span>-->
<!--                    <span class="Labelitem" style="background-color:#fbebec; color: #c07f85;">设备齐全</span>-->
<!--                    <span class="Labelitem" style="color: #a2bbd4;">钥匙</span>-->
<!--                  </div>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="出售楼层">-->
<!--                  <el-select v-model="form.region" placeholder="请输入楼层">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="出售楼层">-->
<!--                  <el-select v-model="form.region" placeholder="南">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                  <el-select v-model="form.region" placeholder="一般装修">-->
<!--                    <el-option label="区域一" value="shanghai"></el-option>-->
<!--                    <el-option label="区域二" value="beijing"></el-option>-->
<!--                  </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="景观">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="海景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="山景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="远景" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="开场" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="城市景" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="提供设施">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="电视" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="冷气" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="洗衣液" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="雪散 name=" type-->
<!--                    "></el-checkbox>-->
<!--                    <el-checkbox label="床" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="餐桌" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="书画" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="屋菀设施">-->
<!--                  <el-checkbox-group v-model="form.type">-->
<!--                    <el-checkbox label="便利店" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="便利店" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="超级市场" name="type"></el-checkbox>-->
<!--                    <el-checkbox label="游泳池 name=" type-->
<!--                    "></el-checkbox>-->
<!--                    <el-checkbox label="儿童乐园" name="type"></el-checkbox>-->
<!--                  </el-checkbox-group>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </div>-->
<!--            &lt;!&ndash;            租賃信息&ndash;&gt;-->
<!--            <div class="leasingInformation">-->
<!--              <div class="propertyUseItem">-->
<!--                <span>租賃信息</span>-->
<!--              </div>-->
<!--              <div class="inputItem">-->
<!--                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                  <el-form-item label="租金" prop="name">-->
<!--                    <div class="inpItemOne ">-->
<!--                      <div>-->
<!--                        <input type="text" style="width: 100px;height: 30px"><span>元/月</span>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="按金">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="两个月租金">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="生约">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="12个月">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                      <div>-->
<!--                        <el-form-item label="死约">-->
<!--                          <el-select v-model="form.region" style="width: 150px" placeholder="12个月">-->
<!--                            <el-option label="区域一" value="shanghai"></el-option>-->
<!--                            <el-option label="区域二" value="beijing"></el-option>-->
<!--                          </el-select>-->
<!--                        </el-form-item>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="租金包含">-->
<!--                    <el-checkbox-group v-model="form.type">-->
<!--                      <el-checkbox label="差向" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="地租/地税" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="管理费" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="水费" name="type"></el-checkbox>-->
<!--                      <el-checkbox label="电费" name="type"></el-checkbox>-->
<!--                    </el-checkbox-group>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="管理费">-->
<!--                    <el-input v-model="form.name" style="width: 200px"></el-input>-->
<!--                    <span>元/月</span>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="可起租日">-->
<!--                    <el-date-picker type="date" placeholder="选择日期" style="width: 200px;"></el-date-picker>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="出售楼层">-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="可明火煮食" value="shanghai"></el-option>-->
<!--                      <el-option label="可明火煮食" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="可饲养宠物" value="shanghai"></el-option>-->
<!--                      <el-option label="可饲养宠物" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="租客不限性别" value="shanghai"></el-option>-->
<!--                      <el-option label="租客不限性别" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                    <el-select v-model="form.region" placeholder="请选择">-->
<!--                      <el-option label="不可分租" value="shanghai"></el-option>-->
<!--                      <el-option label="不可分租" value="beijing"></el-option>-->
<!--                    </el-select>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="广告标题" prop="name">-->
<!--                    <el-input v-model="form.name" style="width: 500px" placeholder="如:周怀大夏设施完善"></el-input>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="特色描述">-->
<!--                    <div style="width: 95%;height: 350px;">-->
<!--                      &lt;!&ndash; 富文本编辑框 &ndash;&gt;-->
<!--                      <div id="websiteEditorElem1"-->
<!--                           style="height:300px;background: #ffffff;"></div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="上传放盘图片" label-width="200" prop="name">-->
<!--                    <p style="color: #999999;">一张好的图片 能影响您的成效,如现在没有照片，可之后在会员中心修改放盘内加回</p>-->
<!--                    <div class="uploadImg">-->
<!--                      <div>-->
<!--                        &lt;!&ndash;                        <el-button class="btn">选择档案</el-button>&ndash;&gt;-->
<!--                        &lt;!&ndash;                        <p>未选择任何档案</p>&ndash;&gt;-->
<!--                        <el-upload-->
<!--                          class="upload-demo"-->
<!--                          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                          :on-preview="handlePreview"-->
<!--                          :on-remove="handleRemove"-->
<!--                          :before-remove="beforeRemove"-->
<!--                          multiple-->
<!--                          :limit="3"-->
<!--                          :on-exceed="handleExceed"-->
<!--                          :file-list="fileList">-->
<!--                          <el-button class="btn">选择档案</el-button>-->
<!--                          <p>未选择任何档案</p>-->
<!--                        </el-upload>-->
<!--                      </div>-->
<!--                      <div class="uploadImgItemTwo">-->
<!--                        &lt;!&ndash;                        <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">&ndash;&gt;-->

<!--                        <el-upload-->
<!--                          class="avatar-uploader"-->
<!--                          action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                          :show-file-list="false"-->
<!--                          :on-success="handleAvatarSuccess"-->
<!--                          :before-upload="beforeAvatarUpload">-->
<!--                          <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--                          <img src="../../../static/myCenter/cimg06.jpg" width="120" height="120" alt="">-->
<!--                        </el-upload>-->

<!--                        <span style="display: inline-block;color: #a9a9a9;">图片描述</span>-->
<!--                      </div>-->
<!--                      <div class="uploadImgItemThree">-->
<!--                        <el-button class="btn" style="width: 150px">移除</el-button>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;            联络资料&ndash;&gt;-->
<!--            <div class="ContactInformation">-->
<!--              <div class="propertyUseItem" style="margin-left: 15px">-->
<!--                <span>联络资料</span>-->
<!--              </div>-->
<!--              <div style="margin-top: 30px">-->
<!--                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--                  <el-form-item label="身份" prop="name">-->
<!--                    <el-radio-group v-model="ruleForm.resource">-->
<!--                      <el-radio label="业主"></el-radio>-->
<!--                      <el-radio label="香港代理人"></el-radio>-->
<!--                    </el-radio-group>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="联络人" prop="name">-->
<!--                    <p style="color: #999999;">请输入联络人</p>-->
<!--                    <div class="userInfos">-->
<!--                      <div class="Infobox">-->
<!--                        <div><img src="../../../static/myCenter/cimg07.jpg" width="100" alt=""></div>-->
<!--                        <div style="margin-left: 15px;">-->
<!--                          <p>姓名:李小小</p>-->
<!--                          <p>电话: 41566441125</p>-->
<!--                          <p>手机: 13707879376</p>-->
<!--                          <el-button style="background-color:#f08181;color: #ffffff;" @click="dialogVisible = true">编辑</el-button>-->
<!--                          <el-button style="background-color:#cccccc;">删除</el-button>-->
<!--                        </div>-->

<!--                      </div>-->
<!--                      <div class="Infobox" >-->
<!--                        <div @click="dialogVisible = true"><img src="../../../static/myCenter/cimg08.jpg" width="150" alt=""></div>-->
<!--                        <div style="margin-left: 15px;text-align: center;line-height: 150px;">-->
<!--                          <p>新建联系人</p>-->
<!--                        </div>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </el-form-item>-->
<!--                </el-form>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="bottomFooter">-->
<!--              <el-button class="footerBtn">下一步</el-button>-->
<!--              <span style="color: #999999;font-weight: bold;">-->
<!--                无法正常刊登?请联系客服电话: 2197 4910或<span style="color: red">[线上留言]</span>-->
<!--              </span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-tab-pane>-->

        <el-tab-pane label="我的發布">
          <div class="tabItem release">
            <div class="building">
              <div style="float: right;padding: 0 15px 0 0;">
                <el-button>租盤</el-button>
                <el-button style="background-color:#f5f5f5;">售盤</el-button>
              </div>

              <el-tabs v-model="activeName" type="card" style="width:100%;">
                <el-tab-pane label="刊登中的樓盤" name="first">
                  <div class="operation">
                    <el-checkbox>全选</el-checkbox>
                    <el-button style="margin-left: 15px;">批量删除</el-button>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-input v-model="input" placeholder="请输入内容" style="width: 150px"></el-input>
                    <el-button>搜索</el-button>
                  </div>
                  <div class="tableInfo">
                    <div class="tableInfoImg">
                      <div style="text-align: left;width: 500px;">
                        <img src="../../../static/myCenter/cimg03.jpg" width="200px"
                             style="float: left;margin-right: 15px;" alt="">
                        <p><span style="font-weight: bold;margin-right: 15px">堅都大廈1</span>
                          <span>[屋苑]</span>
                          <span style="padding: 5px;background-color:#999999;margin-left: 15px;color: #fff">末開啟</span>
                        </p><br/><br/><br/>
                        <p>5435134</p><br/>
                        <p><span style="margin-right: 15px;">12房3聽</span>
                          <span>1222吹(實)</span>
                          <span style="margin-left: 15px">13333吠(建)</span></p><br/>
                        <p style="color: #999999">物件編號: R835369</p>
                      </div>
                      <div style="width: 200px;height: 200px;text-align: right">
                        <p><span style="font-size: 18px;color: #ff5500;">1,112,222</span>元/月</p><br>
                        <p style="color: #999999">2019-08-11錄入</p><br>
                        <p style="color: #999999">0人瀏覽</p><br>
                        <p><i class="el-icon-connection"></i>分享&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-edit"></i>修改
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <i class="el-icon-document-copy"></i>複裂&nbsp;&nbsp;</p>
                      </div>
                    </div>
                    <div
                      style="display: flex;justify-content: space-around;flex-direction: column;flex-flow: column;margin: 0 auto">
                      <p>
                        <el-button style="background-color: #ad2022;color: #ffffff">開放</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue; border:1px solid blue">刪除</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue;border:1px solid blue">已付款</el-button>
                      </p>

                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="關閉中的樓盤" name="second">
                  <div class="operation">
                    <el-checkbox>全选</el-checkbox>
                    <el-button style="margin-left: 15px;">批量删除</el-button>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select style="width: 200px" v-model="value" placeholder="请选择">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <el-input v-model="input" placeholder="请输入内容" style="width: 150px"></el-input>
                    <el-button>搜索</el-button>
                  </div>
                  <div class="tableInfo">
                    <div class="tableInfoImg">
                      <div style="text-align: left;width: 500px;">
                        <img src="../../../static/myCenter/cimg03.jpg" width="200px"
                             style="float: left;margin-right: 15px;" alt="">
                        <p><span style="font-weight: bold;margin-right: 15px">堅都大廈</span>
                          <span>[屋苑]</span>
                          <span style="padding: 5px;background-color:#999999;margin-left: 15px;color: #fff">末開啟</span>
                        </p><br/><br/><br/>
                        <p>5435134</p><br/>
                        <p><span style="margin-right: 15px;">12房3聽</span>
                          <span>1222吹(實)</span>
                          <span style="margin-left: 15px">13333吠(建)</span></p><br/>
                        <p style="color: #999999">物件編號: R835369</p>
                      </div>
                      <div style="width: 200px;height: 200px;text-align: right">
                        <p><span style="font-size: 18px;color: #ff5500;">1,112,222</span>元/月</p><br>
                        <p style="color: #999999">2019-08-11錄入</p><br>
                        <p style="color: #999999">0人瀏覽</p><br>
                        <p><i class="el-icon-connection"></i>分享&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-edit"></i>修改
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <i class="el-icon-document-copy"></i>複裂&nbsp;&nbsp;</p>
                      </div>
                    </div>
                    <div
                      style="display: flex;justify-content: space-around;flex-direction: column;flex-flow: column;margin: 0 auto">
                      <p>
                        <el-button style="background-color: #ad2022;color: #ffffff">開放</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue; border:1px solid blue">刪除</el-button>
                      </p>
                      <p>
                        <el-button style="color: blue;border:1px solid blue">已付款</el-button>
                      </p>

                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的收藏">
          <div class="tabItem collection">
            <div>
              <img src="../../../static/myCenter/cimg02.jpg" width="100%" alt="">
            </div>
            <!-- 列表-->
            <div class="tableList">
              <div class="listCon">
                <el-table :data="tableData" style="width: 100%;background-color:#f5f5f5;">
                  <el-table-column type="selection" :render-header="allSec" width="55"></el-table-column>
                  <el-table-column :render-header="renderHeader" width="500">
                    <template slot-scope="scope">
                      <div class="colItem">
                        <div>
                          <img src="../../../static/myCenter/cimg04.jpg" width="150px" alt="">
                        </div>
                        <div class="colText">
                          <h4>堅都大廈<span
                            style="color: #fff;padding: 2px 5px 2px 5px;background-color:red;border-radius: 5px;margin-left: 15px">vip</span>
                          </h4>
                          <p>
                            <span>新界</span>
                            <span>--</span>
                            <span>屯门</span>
                          </p>
                          <p>0尺</p>
                          <p>纪录时间: <span>2019-11-21</span></p>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="价格" width="180">
                    <template slot-scope="scope">
                      <div>
                        <span style="color: #ff5500;font-size: 16px;"> 1,112,222</span> 元/月
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="楼盘管理">
                    <template slot-scope="scope">
                      <el-button size="mini" style="color: blue;border: 1px solid blue;background-color: #fff;"
                                 type="danger">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!--            分页-->
            <div class="block" style="">
              <el-pagination
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="資料修改">
          <div class="tabItem">
            <div>
              <img src="../../../static/myCenter/cimg02.jpg" width="100%" alt="">
            </div>
            <div class="dataEdit">
              <h3>阁下的基本资料</h3>
              <div class="userInfos">
                <el-form ref="form" :label-position="labelPosition" :model="form" label-width="80px">
                  <el-form-item label="头像">
                    <div class="headPortrait">
                      <span class="replace">更换头像</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="真实姓名">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="身份">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.resource">
                      <el-radio label="先生"></el-radio>
                      <el-radio label="女士"></el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="手机号">
                    <el-input :disabled="true" v-model="form.name" placeholder="151859632441"
                              style="width: 300px"></el-input>
                    <span style="cursor: pointer;">修改注册手机号</span>
                  </el-form-item>
                  <el-form-item label="座机">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="E-mail">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="background-color:#ad2022; color: #ffffff;">修改资料</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <h3>密码修改</h3>
              <div class="userInfos">
                <el-form ref="form" :model="form" :label-position="labelPosition" label-width="80px">

                  <el-form-item label="原密码">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input v-model="form.name" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="再次输入密码" style="width: 300px">
                    <el-input v-model="form.name" style="width: 300px;"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button style="background-color:#ad2022; color: #ffffff;">修改资料</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>

          </div>
        </el-tab-pane>
        <el-tab-pane label="消費明細">
          <div class="tabItem">
            <div class="userInfo">
              <div class="userImg">
                <img src="../../../static/myCenter/cimg01.jpg" alt="">
              </div>
              <div class="txtInfo">
                <p style="font-weight: bold;">用户名字</p><br/>
                <p>售盤方案</p>
                <p style="font-size: 12px;padding-bottom: 30px">購買方案，即可刊登廣告!購買售盤方案</p>
              </div>
              <div class="txtInfo">
                <p>租盤方案</p>
                <p style="font-size: 12px;padding-bottom: 30px;">購買方案，即可刊登廣告!購買租盤方案</p>

              </div>
            </div>
            <div class="consumptionDetails">
              <el-tabs type="card" v-model="activeName1">
                <el-tab-pane label="全部" name="second">
                  <div style="padding: 30px">
                    <el-table
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      :data="tableData1"
                      style="width: 100%;">
                      <el-table-column prop="date" label="交易时间" width="280"></el-table-column>
                      <el-table-column prop="name" label="服务名" width="180"></el-table-column>
                      <el-table-column prop="address" label="类型"></el-table-column>
                      <el-table-column prop="address" label="详细"></el-table-column>
                      <el-table-column prop="address" label="金额"></el-table-column>
                      <el-table-column prop="address" label="状态"></el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="支出" name="first">
                  <div style="padding: 30px">
                    <el-table
                      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                      :data="tableData1"
                      style="width: 100%;">
                      <el-table-column prop="date" label="交易时间" width="280"></el-table-column>
                      <el-table-column prop="name" label="服务名" width="180"></el-table-column>
                      <el-table-column prop="address" label="类型"></el-table-column>
                      <el-table-column prop="address" label="详细"></el-table-column>
                      <el-table-column prop="address" label="金额"></el-table-column>
                      <el-table-column prop="address" label="状态"></el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>

              </el-tabs>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="瀏覽記錄">
          <div class="tabItem">
            瀏覽記錄
          </div>
        </el-tab-pane>
        <el-tab-pane label="關於我們">
          <div class="tabItem baoutMe">
            <div class="paragraph" v-for="item in [1,2,3]">
              <h3>我们的历史</h3>
              <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上安居客，看全房源!楼盘全、房源全、中介全,全面涵盖新房、二手房、租房、商铺写字楼、海外地产五大业务,覆盖全国
                600+城市及区域，为购房人群提供更优质、全面、易用、实用的房产信息服务，更有视频看房、全景看房，实现用户更多元化的
                购房体验! 2018年11月6日- 安居客房产端口销售基本要求是什么?为你提供瑞庭网络技术(上海)有限公司房产端口销售岗位职责,
                工作内容,岗位要求，还为你提供该职位竞争力分析
              </p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="举报">
          <!--          <div class="tabItem">-->
          <!--            <div>-->
          <!--              <img src="../../../static/myCenter/cimg02.jpg" width="100%" alt="">-->
          <!--            </div>-->
          <!--            <div class="report">-->
          <!--              <p style="color: #999999;margin-left: 50px">感谢你使用举报功能，你在此反映的问题我们将在24小时内进行回复。</p>-->
          <!--              <div class="reportFrom">-->
          <!--                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
          <!--                  <el-form-item label="主题" prop="name">-->
          <!--                    <el-input v-model="ruleForm.name" style="width: 300px;"></el-input>-->
          <!--                  </el-form-item>-->
          <!--                  <el-form-item label="内容" prop="desc">-->
          <!--                    <el-input type="textarea" placeholder="比如:编号: R835823" style="width: 350px"-->
          <!--                              v-model="ruleForm.desc"></el-input>-->
          <!--                  </el-form-item>-->
          <!--                  <el-form-item>-->
          <!--                    <el-button style="background-color:#ad2022; color: #ffffff;">确认提交</el-button>-->
          <!--                  </el-form-item>-->
          <!--                </el-form>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
        </el-tab-pane>
      </el-tabs>
    </div>
    <div style="text-align: left;">
      <el-dialog
        title="业主"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: center">
           <el-button type="primary" @click="dialogVisible = false" style="background-color:#ad2022;width: 200px;">确 定</el-button>
          <el-button @click="dialogVisible = false" style="width: 200px;">取 消</el-button>

        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>

  import 'element-ui/lib/theme-chalk/index.css';
  import E from 'wangeditor';

  export default {
    name: "myCenter",
    data() {
      return {
        dialogVisible: false,
        phoneEditor: '',
        name: '',
        labelPosition: 'left',
        activeName1: 'second',
        tabPosition: 'left',
        activeName: 'first',
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        tableData: [{}, {}, {}, {}],
        tableData1: [{},],

        currentPage4: 4,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        ruleForm: {
          name: '',
          desc: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入活动名称', trigger: 'blur'},
            {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
          ],

          desc: [
            {required: true, message: '请填写活动形式', trigger: 'blur'}
          ]
        }
      }

    },
//富文本
    mounted() {
      // wangeditor
      this.phoneEditor = new E('#websiteEditorElem');
      this.phoneEditor1 = new E('#websiteEditorElem1');
      // this.phoneEditor.onchange = function () {
      //   this.formData.phone = this.$txt.html()
      // }
      // 上传图片到服务器，base64形式
      this.phoneEditor.customConfig.uploadImgShowBase64 = true
      // 隐藏网络图片
      this.phoneEditor.customConfig.showLinkImg = false
      // 创建一个富文本编辑器
      this.phoneEditor.create()
      // 富文本内容
      this.phoneEditor.txt.html()


      // 上传图片到服务器，base64形式
      this.phoneEditor1.customConfig.uploadImgShowBase64 = true
      // 隐藏网络图片
      this.phoneEditor1.customConfig.showLinkImg = false
      // 创建一个富文本编辑器
      this.phoneEditor1.create()
      // 富文本内容
      this.phoneEditor1.txt.html()
    },


    methods: {
      renderHeader() {
        return (
          < div >
          < el-button > 删除选中 < /el-button>
          < /div>
      )
      },
      allSec() {
        return (
          < div > < span > 全选 < /span> </
        div >
      )
      },
    }
  }
</script>

<style scoped>

  .building .el-tabs__item {
    width: 300px !important;
  }

  .myCenter {
    text-align: left;
    width: 1200px;
    height: 100%;
    /*border: 1px solid #000;*/
    margin: 0 auto;
    padding-top: 15px;

  }

  .el-tabs__nav-scroll {
    height: 500px;
  }

  /*个人主页*/
  .myCenter .tabItem {
    width: 98%;
    height: 100%;
    /*background-color: #fff;*/
    float: right;
  }

  .myCenter .tabItem .userInfo {
    width: 100%;
    height: 180px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: flex-start;
    flex-flow: row;
    flex-direction: row;
    background-color: #fff;
  }

  .myCenter .tabItem .userInfo div {
    width: 30%;
    height: 180px;
    /*border: 1px solid #000;*/
  }

  .myCenter .tabItem .userInfo .userImg {
    width: 12%;
    height: 150px;
    margin: 30px 0 0 50px;
    border: none;
  }

  .myCenter .tabItem .userInfo .txtInfo {
    line-height: 30px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    flex-flow: column;
  }

  .myCenter .tabItem .building {
    width: 100%;
    height: 580px;
    /*border: 1px solid #000;*/
    margin-top: 15px;
    background-color: #fff;
  }

  .myCenter .tabItem .building .tableInfo {
    width: 95%;
    height: 230px;
    border: 1px solid #999;
    margin: 0 auto;
    display: flex;
    flex-flow: row;
    flex-direction: row;
    justify-content: space-between;
  }

  .myCenter .tabItem .building .tableInfo .tableInfoImg {
    width: 80%;
    height: 199px;
    /*border: 1px solid #000;*/
    background-color: #f4f7fa;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    padding: 15px;
  }

  /*  关于我们*/
  .myCenter .baoutMe {
    background-color: #fff;
    height: 100%;
    /*border: 1px solid #000;*/
    margin-bottom: 100px;

  }

  .myCenter .paragraph {
    padding: 30px;
    line-height: 30px;
  }

  /*  我的发布*/
  .myCenter .release {
    background-color: #fff;
  }

  .myCenter .release .operation {
    width: 95%;
    height: 50px;
    border: 1px solid #999;
    margin: 15px auto;
    background-color: #f0f0f0;
    padding: 10px 0 0 5px;

  }

  /*我的收藏*/
  .collection {
    /*border: 1px solid #000;*/
  }

  .myCenter .tabItem .tableList {
    width: 100%;
    /*height: 100%;*/
    background-color: #fff;
    margin-top: 15px;
    padding-top: 30px;

  }

  /*分页*/
  .myCenter .tabItem .block {
    float: right;
    margin-top: 15px;
    height: 300px;
  }

  .myCenter .tabItem .tableList .listCon {
    width: 98%;
    height: 100%;
    background-color: #f5f5f5;
    margin: 0 auto;
    /*border: 1px solid #000;*/
    /*overflow-y: scroll;*/
  }

  .myCenter .tabItem .tableList .listCon .colItem {
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
    /*border: 1px solid #000;*/
    width: 300px;
  }

  .myCenter .tabItem .tableList .listCon .colText {
    line-height: 30px;
  }


  /*  資料修改*/
  .myCenter .tabItem .dataEdit {
    width: 100%;
    height: 1000px;
    /*border: 1px solid #000;*/
    background-color: #fff;
    margin-top: 15px;
    padding: 15px;
  }

  .myCenter .tabItem .dataEdit .userInfos {
    /*border: 1px solid #000;*/
    width: 80%;
    margin: 15px auto;
  }

  .myCenter .tabItem .dataEdit .userInfos .headPortrait {
    width: 110px;
    height: 110px;
    /*border: 1px solid #999;*/
    border-radius: 15px;
    background: url("../../../static/myCenter/cimg05.jpg") no-repeat;
    background-size: cover;
  }

  .myCenter .tabItem .dataEdit .userInfos .headPortrait .replace {
    width: 110px;
    /*display: block;*/
    position: absolute;
    bottom: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    height: 30px;
    line-height: 30px;
    color: #FFFFFF;
    border-radius: 0 0 15px 15px;
    cursor: pointer;
  }

  /*  消费明细*/
  .myCenter .tabItem .consumptionDetails {
    width: 100%;
    height: 600px;
    background-color: #fff;
    margin-top: 30px;
  }

  /*  举报*/
  .myCenter .tabItem .report {
    height: 470px;
    background-color: #fff;
    margin: 15px 0 100px 0;
    padding-top: 15px;

  }

  .myCenter .tabItem .report .reportFrom {
    margin-top: 15px;
  }

  /*  房屋出租*/
  .myCenter .tabItem .Advertisement {
    width: 100%;
    height: 200px;
    background-color: #fff;

  }

  .myCenter .tabItem .Advertisement .steps {
    margin-top: 30px;
  }

  .myCenter .tabItem .propertyUse {
    /*border: 1px solid #000;*/
    margin-top: 30px;
    height: 100px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
  }

  .myCenter .tabItem .propertyUse div {
    /*border: 1px solid #000;*/
    width: 30%;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-size: 20px;
    color: #999999;
    cursor: pointer;
  }

  .myCenter .tabItem .propertyUse div:hover {
    border-bottom: 2px solid #ad2022;
    color: #333333;
  }

  .myCenter .tabItem .propertyUseItem {
    border-left: 5px solid #ad2022;
    margin-top: 30px;
    border-radius: 5px;
    padding-left: 15px;
  }

  .myCenter .tabItem .propertyUseItem span {
    font-size: 20px;
    font-weight: bold;
  }

  /*  单位资料*/
  .myCenter .tabItem .unitData {
    width: 80%;
    height: 60px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;

  }

  .myCenter .tabItem .unitData .inpItemOne {
    width: 100px;
    height: 20px;
    border: 1px solid #ff0000;
    background-color: #ffdbdb;
    line-height: 20px;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemOne input {
    width: 80px;
    height: 20px;
    border: none;
    margin-left: 5px;
    background-color: #ffdbdb;
  }

  .myCenter .tabItem .unitData .inpItemTwo {
    border: 1px solid #cccccc;
    background-color: #fff;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemTwo input {
    background-color: #fff;
  }

  .myCenter .tabItem .unitData .inpItemThree {
    border: none;
    background-color: #f5f5f5;
    padding: 5px;
  }

  .myCenter .tabItem .unitData .inpItemFour {
    width: 160px;
    padding: 5px;
  }

  .myCenter .tabItem .Label span {
    margin-right: 15px;
  }

  .myCenter .tabItem .Label .Labelitem {
    padding: 5px;
    border-radius: 5px;
    font-weight: bold;
  }

  /* 租賃信息 */
  .myCenter .tabItem .leasingInformation {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding-bottom: 30px;
  }

  .myCenter .tabItem .leasingInformation {

    padding-top: 1px;
    padding-left: 15px;
  }

  .myCenter .tabItem .leasingInformation .propertyUseItem {
    border-left: 5px solid #ad2022;
    border-radius: 5px;
  }

  .myCenter .tabItem .leasingInformation .inputItem {
    margin-top: 30px;
  }

  .myCenter .tabItem .leasingInformation .inputItem .inpItemOne {
    width: 95%;
    height: 50px;
    /*border: 1px solid #000;*/
    display: flex;
    justify-content: space-between;
    flex-flow: row;
    flex-direction: row;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg {
    width: 80%;
    height: 200px;
    border: 1px solid #999999;
    float: right;
    margin-right: 120px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
    padding: 15px;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .btn {
    color: #FFFFFF;
    background-color: #ad2022;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .uploadImgItemTwo {
    display: flex;
    flex-flow: row;
    flex-direction: row;
    justify-content: space-between;
  }

  .myCenter .tabItem .leasingInformation .inputItem .uploadImg .uploadImgItemThree {
    display: flex;
    flex-flow: column;
    flex-flow: column;
    justify-content: flex-end;
  }

  /* 联络资料 */
  .ContactInformation {
    height: 466px;
    border: 1px solid #fff;
    margin-top: 30px;
    background-color: #fff;
  }

  .ContactInformation .userInfos {
    /*border: 1px solid #000;*/
    height: 250px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-flow: row;
  }

  .ContactInformation .userInfos .Infobox {
    border: 4px dashed #cccccc;
    width: 40%;
    display: flex;
    justify-content: flex-start;
    flex-flow: row;
    flex-direction: row;
    padding: 30px;
  }

  .bottomFooter {
    height: 150px;
    /*border: 1px solid #000;*/
    margin-top: 30px;
  }

  .bottomFooter .footerBtn {
    background-color: #ad2022;
    width: 200px;
    color: #FFFFFF;
    font-weight: bold;
  }
</style>
